<template>
    <!-- 页面设置页面 -->
    <div>
        <ComTitle title="页面设置" />
        <ComGroup title="页面名称" name-black content-block>
            <el-input v-model.lazy="name" placeholder="请输入页面名称" />
        </ComGroup>
        <ComGroup title="微信文案分享" name-black content-block>
            <el-input v-model.lazy="shareDesc" placeholder="用户分享给朋友时候显示,最多28个字" />
        </ComGroup>
        <ComGroup title="微信分享卡片" name-black content-block tips="图片建议长宽比为5:4">
            <!-- 重置上传组件 -->
            <el-button type="text" @click="shareImage = ''">重置</el-button>
            <UpLoadBox :img-url.sync="shareImage" />
        </ComGroup>
        <ComDivider />
        <ComGroup title="背景颜色">
            <el-color-picker v-model="backgroundColor"></el-color-picker>
            <el-button type="text" @click="backgroundColor= ''">重置</el-button>
        </ComGroup>
        <ComGroup title="背景图片">
            <!-- 重置上传组件 -->
            <el-button type="text" @click="backgroundImage = ''">重置</el-button>
            <UpLoadBox :img-url.sync="backgroundImage" />
        </ComGroup>
    </div>
</template>

<script>
import ComTitle from '@/components/BasicUi/ComTitle.vue'
import ComGroup from '@/components/BasicUi/ComGroup.vue'
import UpLoadBox from '@/components/BasicUi/UpLoadBox.vue'
import ComDivider from '@/components/BasicUi/ComDivider.vue'
export default {
    components: {
        ComTitle,
        ComGroup,
        UpLoadBox,
        ComDivider
    },
    data() {
        return {

        };
    },
    methods: {
        updatePageInfo(value) {
            this.$store.commit('SET_PAGE_CONFIG', value)
            console.log('触发111', value);
        }
    },
    mounted() {
        console.log(123, this.shareDesc);
    },
    computed: {
        name: {
            get() {
                return this.$store.state.pageData.name
            },
            set(val) {
                //传入的数据是对象 方便一次性修改多个
                this.updatePageInfo({ name: val })
            }
        },
        //微信分享数据
        shareDesc: {
            get() {
                return this.$store.state.pageData.shareDesc
            },
            set(val) {
                //传入的数据是对象 方便一次性修改多个
                this.updatePageInfo({ shareDesc: val })
            }
        },
        //微信分享卡片数据
        shareImage: {
            get() {
                return this.$store.state.pageData.shareImage
            },
            set(val) {
                //传入的数据是对象 方便一次性修改多个
                this.updatePageInfo({ shareImage: val })
               
            }
        },
        //背景颜色
        backgroundColor: {
            get() {
                return this.$store.state.pageData.backgroundColor
            },
            set(val) {
                //传入的数据是对象 方便一次性修改多个
                this.updatePageInfo({ backgroundColor: val })
                
            }
        },
        backgroundImage:{
            get() {
                return this.$store.state.pageData.backgroundImage
            },
            set(val) {
                //传入的数据是对象 方便一次性修改多个
                this.updatePageInfo({ backgroundImage: val })
                
            }
        },

    }
};
</script>